<template>
  <div>
    <van-nav-bar
      title="订单"
    />
    <div class="tab">
      <div :class="{order_act:pageindex == 4}" class="" @click="change(4)">全部</div>
      <div :class="{order_act:pageindex == 0}" class="" @click="change(0)">代付款</div>
      <div :class="{order_act:pageindex == 1}" class="" @click="change(1)">代发货</div>
      <div :class="{order_act:pageindex == 2}" class="" @click="change(2)">待收货</div>
      <div :class="{order_act:pageindex == 3}" class="" @click="change(3)">待评价</div>
    </div>

    <div class="cont">
      <div v-if="page_state.p0&&pageindex==0">您还没有订单</div>
      <div v-if="page_state.p1&&pageindex==1">您还没有订单</div>
      <div v-if="page_state.p2&&pageindex==2">您还没有订单</div>
      <div v-if="page_state.p3&&pageindex==3">您还没有订单</div>
      <div v-if="data.length==0&&pageindex==4">您还没有订单</div>
      <!--<div>您还没有订单</div>-->
      <orderdetail v-if="pageindex==4&&data.length>0" v-for="(item,index) in data" v-bind:item="item" :key="index"></orderdetail>
      <orderdetail v-if="item.state==pageindex" v-for="(item,index) in data" v-bind:item="item" :key="index"></orderdetail>
    </div>
  </div>
</template>

<script>
  import store from '../../vuex/store'
  import orderdetail from './orderdetail'
  export default {
    name: "order",
    components:{
      orderdetail
    },
    data: function () {
      return {
        pageindex:0,
        page_state:{
          p0:true,
          p1:true,
          p2:true,
          p3:true,
          // p0:false
        },
        pagedata:{
          img:[]
        },
      }
    },
    methods:{
      change:function (v) {
        this.pageindex=v
      }
    },
    mounted() {
     for(var i=0;i<this.data.length;i++){
       switch (this.data[i].state) {
         case 0:
           this.page_state.p0=false
          break
         case 1:
           this.page_state.p1=false
           break
         case 2:
           this.page_state.p2=false
           break
         case 3:
           this.page_state.p3=false
           break
       }
     }
    },
    computed: {
      data(){
        return store.state.order
      }
    },

  }
</script>

<style lang="less" scoped>
  .tab {
    height: 35px;
    background-color: #fff;
  }

  .tab div {
    width: 20%;
    text-align: center;
    float: left;
    font-size: 14px;
    line-height: 35px;
    position: relative;
  }

  .tab div::after {
    position: absolute;
    width: 25px;
    bottom: 0;
    left: 50%;
    margin-left: -12.5px;
    content: " ";
  }

  .tab .order_act::after {
    border-bottom: 2px solid @_green;
  }

  .cont{
    /*background-color: #fff;*/
    overflow: hidden;
    height: auto;
    margin-top: 10px;
  }


</style>
